<template>
    <div>
        <div>
            {{ questionArray }}
            <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                    <h1>表单名称</h1>
                    <el-input
                        style="width: 55%"
                        v-model="formInfo.formName"
                        placeholder="请输入表单名称"
                    ></el-input>
                    <br /><br />
                    <el-switch
                        v-model="formInfo.timeLimit"
                        active-text="设置时限"
                        inactive-text="不限时"
                    >
                    </el-switch>
                    <div class="block" v-if="formInfo.timeLimit">
                        <h3>截止日期时间</h3>
                        &nbsp;
                        <el-date-picker
                            v-model="formInfo.endTime"
                            type="datetime"
                            placeholder="选择日期时间"
                            align="right"
                            :picker-options="pickerOptions0"
                        >
                        </el-date-picker>
                    </div>
                </div>
                <!-- 题目列表 -->
                <div
                    v-for="(item, index) in questionArray"
                    :key="(item, index)"
                >
                    <el-card class="box-card" shadow="hover">
                        <el-switch
                            active-text="必做"
                            inactive-text="非必做"
                            v-model="item.must"
                        ></el-switch>
                        <br />
                        <br />
                        <!-- 填空题 -->
                        <div v-if="item.questionType == 0">
                            {{ index + 1 }}、填空题<br /><br />
                            题目名&nbsp;
                            <el-input
                                v-model="item.questionName"
                                style="width: 55%"
                                placeholder="请输入题目名"
                            ></el-input>
                            <br />
                            <br />
                            <el-input
                                style="width: 65%"
                                type="textarea"
                                placeholder="请输入内容"
                            ></el-input
                            >&nbsp; <br /><br />
                            <el-button
                                type="danger"
                                icon="el-icon-delete"
                                plain
                                @click="DeleteBlank(index)"
                                >删除问题</el-button
                            >
                            <el-button
                                plain
                                icon="el-icon-top"
                                @click="UpQuestion(index)"
                                >上移问题</el-button
                            >
                            <el-button
                                plain
                                icon="el-icon-bottom"
                                @click="DownQuestion(index)"
                                >下移问题</el-button
                            >
                        </div>
                        <!-- 单选题 -->
                        <div v-if="item.questionType == 1">
                            {{ index + 1 }}、单选题&nbsp;
                            <br />
                            <br />
                            题目名&nbsp;
                            <el-input
                                v-model="item.questionName"
                                style="width: 55%"
                                placeholder="请输入要调查的意见题目"
                            ></el-input>
                            <div
                                v-for="(item0, index0) in item.options"
                                :key="(item0, index0)"
                            >
                                <br />
                                选项&nbsp;{{ index0 + 1 }}
                                <el-input
                                    v-model="item.options[index0].content"
                                    placeholder="请输入选项描述"
                                    style="width: 55%"
                                ></el-input
                                >&nbsp;
                                <el-button
                                    plain
                                    icon="el-icon-plus"
                                    @click="AddOption(index, index0)"
                                    >增加选项</el-button
                                >
                                <el-button
                                    plain
                                    icon="el-icon-delete"
                                    @click="DeleteOption(index, index0)"
                                    v-if="index0 > 0"
                                    >删除选项</el-button
                                >
                                <el-button
                                    plain
                                    icon="el-icon-top"
                                    @click="UpOption(index, index0)"
                                ></el-button>
                                <el-button
                                    plain
                                    icon="el-icon-bottom"
                                    @click="DownChoice(index, index0)"
                                ></el-button
                                ><br />
                            </div><br/>
                            <el-button
                                type="danger"
                                icon="el-icon-delete"
                                plain
                                @click="DeleteRadio(index)"
                                >删除问题</el-button
                            >
                            <el-button
                                plain
                                icon="el-icon-top"
                                @click="UpQuestion(index)"
                                >上移问题</el-button
                            >
                            <el-button
                                plain
                                icon="el-icon-bottom"
                                @click="DownQuestion(index)"
                                >下移问题</el-button
                            >
                        </div>
                        <!-- 多选题 -->
                        <div v-if="item.questionType == 2">
                            {{ index + 1 }}、多选题&nbsp;
                            <span v-if="item.must">
                                <el-select
                                    v-model="item.optionMin"
                                    placeholder="至少选择项数"
                                >
                                    <el-option
                                        v-for="item0 in item.options.length"
                                        :key="item0"
                                        :label="'至少选' + item0 + '项'"
                                        :value="item0"
                                    >
                                    </el-option> </el-select
                                >&nbsp;

                                <el-select
                                    v-model="item.optionMax"
                                    placeholder="至多选择项数"
                                >
                                    <el-option
                                        v-for="item2 in item.options.length"
                                        :key="item2"
                                        :label="'至多选' + item2 + '项'"
                                        :value="item2"
                                    >
                                    </el-option> </el-select
                                >&nbsp;
                                <el-link
                                    :underline="false"
                                    @click="
                                        item.min = 1;
                                        item.max = item.options.length;
                                    "
                                    >默认</el-link
                                >
                            </span>
                            <br />
                            <br />
                            题目名&nbsp;
                            <el-input
                                v-model="item.questionName"
                                style="width: 55%"
                                placeholder="请输入要调查的意见题目"
                            ></el-input>
                            <div
                                v-for="(item0, index0) in item.options"
                                :key="(item0, index0)"
                            >
                                <br />
                                选项&nbsp;{{ index0 + 1 }}
                                <el-input
                                    v-model="item.options[index0].content"
                                    placeholder="请输入选项描述"
                                    style="width: 55%"
                                ></el-input
                                >&nbsp;
                                <el-button
                                    plain
                                    icon="el-icon-plus"
                                    @click="AddOption(index, index0)"
                                    >增加选项</el-button
                                >
                                <el-button
                                    plain
                                    icon="el-icon-delete"
                                    v-if="index0 > 1"
                                    @click="DeleteOption(index, index0)"
                                    >删除选项</el-button
                                >
                                <el-button
                                    plain
                                    icon="el-icon-top"
                                    @click="UpOption(index, index0)"
                                ></el-button>
                                <el-button
                                    plain
                                    icon="el-icon-bottom"
                                    @click="DownOption(index, index0)"
                                ></el-button>
                            </div>
                            <br />
                            <el-button
                                type="danger"
                                icon="el-icon-delete"
                                plain
                                @click="DeleteCheckbox(index)"
                                >删除问题</el-button
                            >
                            <el-button
                                plain
                                icon="el-icon-top"
                                @click="UpQuestion(index)"
                                >上移问题</el-button
                            >
                            <el-button
                                plain
                                icon="el-icon-bottom"
                                @click="DownQuestion(index)"
                                >下移问题</el-button
                            >
                        </div>
                        <!--下拉框-->
                        <div v-if="item.questionType == 3">
                            {{ index + 1 }}、下拉框&nbsp;
                            <br />
                            <br />
                            题目名&nbsp;
                            <el-input
                                v-model="item.questionName"
                                style="width: 55%"
                                placeholder="请输入要调查的意见题目"
                            ></el-input>
                            &nbsp;<el-select
                                v-model="item.null"
                                placeholder="预览"
                            >
                                <el-option
                                    v-for="(item0, index0) in item.options"
                                    :key="(item0, index0)"
                                    :label="item0.content"
                                    :value="item0.content"
                                >
                                </el-option>
                            </el-select>
                            <div
                                v-for="(item0, index0) in item.options"
                                :key="(item0, index0)"
                            >
                                <br />
                                选项&nbsp;{{ index0 + 1 }}
                                <el-input
                                    v-model="item.options[index0].content"
                                    placeholder="请输入选项描述"
                                    style="width: 55%"
                                ></el-input
                                >&nbsp;
                                <el-button
                                    plain
                                    icon="el-icon-plus"
                                    @click="AddOption(index, index0)"
                                    >增加选项</el-button
                                >
                                <el-button
                                    plain
                                    icon="el-icon-delete"
                                    v-if="index0 > 1"
                                    @click="DeleteOption(index, index0)"
                                    >删除选项</el-button
                                >
                                <el-button
                                    plain
                                    icon="el-icon-top"
                                    @click="UpOption(index, index0)"
                                ></el-button>
                                <el-button
                                    plain
                                    icon="el-icon-bottom"
                                    @click="DownOption(index, index0)"
                                ></el-button>
                            </div>
                            <br />
                            <el-button
                                type="danger"
                                icon="el-icon-delete"
                                plain
                                @click="DeleteListbox(index)"
                                >删除问题</el-button
                            >
                            <el-button
                                plain
                                icon="el-icon-top"
                                @click="UpQuestion(index)"
                                >上移问题</el-button
                            >
                            <el-button
                                plain
                                icon="el-icon-bottom"
                                @click="DownQuestion(index)"
                                >下移问题</el-button
                            >
                        </div>
                        <!--滑动条-->
                        <div v-if="item.questionType == 4">
                            {{ index + 1 }}、滑动条&nbsp;
                            <br />
                            <br />
                            题目名&nbsp;
                            <el-input
                                v-model="item.questionName"
                                style="width: 55%"
                                placeholder="请输入要调查的意见题目"
                            ></el-input>
                            <el-slider
                                :min="0"
                                :max="100"
                                style="width: 55%"
                            ></el-slider>
                            设置最小值&nbsp;
                            <el-input
                                v-model="item.slideMin"
                                style="width: 55%"
                                placeholder="请输入最小值"
                            ></el-input>
                            <br />
                            <br />
                            设置最大值&nbsp;
                            <el-input
                                v-model="item.slideMax"
                                style="width: 55%"
                                placeholder="请输入最大值"
                            ></el-input>
                            <br /><br />
                            <el-button
                                type="danger"
                                icon="el-icon-delete"
                                plain
                                @click="DeleteSlide(index)"
                                >删除问题</el-button
                            >
                            <el-button
                                plain
                                icon="el-icon-top"
                                @click="UpQuestion(index)"
                                >上移问题</el-button
                            >
                            <el-button
                                plain
                                icon="el-icon-bottom"
                                @click="DownQuestion(index)"
                                >下移问题</el-button
                            >
                        </div>
                        <!--起止日期时间-->
                        <div v-if="item.questionType == 5">
                            {{ index + 1 }}、起止日期时间&nbsp;
                            <br />
                            <br />
                            题目名&nbsp;
                            <el-input
                                v-model="item.questionName"
                                style="width: 55%"
                                placeholder="请输入要调查的意见题目"
                            ></el-input>
                            <br />
                            <br />
                            <div class="block">
                                <span class="demonstration">预览</span>&nbsp;
                                <el-date-picker
                                    type="datetimerange"
                                    :picker-options="pickerOptions"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    align="right"
                                >
                                </el-date-picker>
                            </div>
                            <br /><br />
                            <el-button
                                type="danger"
                                icon="el-icon-delete"
                                plain
                                @click="DeleteDateTime(index)"
                                >删除问题</el-button
                            >
                            <el-button
                                plain
                                icon="el-icon-top"
                                @click="UpQuestion(index)"
                                >上移问题</el-button
                            >
                            <el-button
                                plain
                                icon="el-icon-bottom"
                                @click="DownQuestion(index)"
                                >下移问题</el-button
                            >
                        </div>
                        <!-- 评分 -->
                        <div v-if="item.questionType == 6">
                            {{ index + 1 }}、评分题&nbsp;
                            <br />
                            <br />
                            题目名&nbsp;
                            <el-input
                                v-model="item.questionName"
                                style="width: 55%"
                                placeholder="请输入评分题目"
                            ></el-input>
                            <br />
                            <br />
                            <div class="block">
                                <el-rate></el-rate>
                            </div><br />
                            <el-button
                                type="danger"
                                icon="el-icon-delete"
                                plain
                                @click="DeleteRate(index)"
                                >删除问题</el-button
                            >
                            <el-button
                                plain
                                icon="el-icon-top"
                                @click="UpQuestion(index)"
                                >上移问题</el-button
                            >
                            <el-button
                                plain
                                icon="el-icon-bottom"
                                @click="DownQuestion(index)"
                                >下移问题</el-button
                            >
                        </div>
                    </el-card>
                    <br />
                </div>
                <el-button
                    class="el-icon-plus"
                    :underline="false"
                    @click="AddBlank"
                    size="small"
                    type="primary"
                    >填空题</el-button
                >&nbsp;
                <el-button
                    size="small"
                    type="primary"
                    class="el-icon-plus"
                    :underline="false"
                    @click="AddRadio()"
                    >单选题</el-button
                >&nbsp;
                <el-button
                    size="small"
                    type="primary"
                    class="el-icon-plus"
                    :underline="false"
                    @click="AddCheckbox"
                    >多选题</el-button
                >&nbsp;
                <el-button
                    size="small"
                    type="primary"
                    class="el-icon-plus"
                    :underline="false"
                    @click="AddListbox"
                    >下拉框</el-button
                >&nbsp;
                <el-button
                    size="small"
                    type="primary"
                    class="el-icon-plus"
                    :underline="false"
                    @click="AddSlider"
                    >滑动条</el-button
                >
                &nbsp;
                <el-button
                    size="small"
                    type="primary"
                    class="el-icon-plus"
                    :underline="false"
                    @click="AddDateTime"
                    >起止日期时间</el-button
                >
                &nbsp;
                <el-button
                    size="small"
                    type="primary"
                    class="el-icon-plus"
                    :underline="false"
                    @click="AddRate"
                    >评分题</el-button
                >
            </el-card>
            <br />
            <el-button type="success" icon="el-icon-s-promotion"
                >发布表单</el-button
            >
        </div>
        {{ formInfo.counts }}
        {{formInfo}}
    </div>
</template>

<script>
//导入接口
import { nanoid } from "nanoid"; //生成id的接口
import { getFormInfo } from "@/api/edit.js"; //更新表单的接口
import { reviseForm } from "@/api/newform.js"; //更新表单的接口

import { addBlank } from "@/api/newform.js"; //增加填空题的接口
import { reviseBlank } from "@/api/newform.js"; //修改填空题的接口
import { deleteBlank } from "@/api/newform.js"; //删除选择题的接口

import { addRadio } from "@/api/newform.js"; //增加单选题的接口
import { reviseRadio } from "@/api/newform.js"; //修改单选题的接口
import { deleteRadio } from "@/api/newform.js"; //删除单选题的接口

import { addCheckbox } from "@/api/newform.js"; //增加多选题的接口
import { reviseCheckbox } from "@/api/newform.js"; //修改多选题的接口
import { deleteCheckbox } from "@/api/newform.js"; //删除多选题的接口

import { addListbox } from "@/api/newform.js"; //增加下拉菜单的接口
import { reviseListbox } from "@/api/newform.js"; //修改下拉菜单的接口
import { deleteListbox } from "@/api/newform.js"; //删除下拉菜单的接口

import { addOption } from "@/api/newform.js"; //增加选项的接口
import { reviseOption } from "@/api/newform.js"; //修改选项的接口
import { deleteOption } from "@/api/newform.js"; //删除选项的接口

import { addSlide } from "@/api/newform.js"; //增加滑动条的接口
import { reviseSlide } from "@/api/newform.js"; //修改滑动条的接口
import { deleteSlide } from "@/api/newform.js"; //删除滑动条的接口

import { addDateTime } from "@/api/newform.js"; //增加日期时间选择的接口
import { reviseDateTime } from "@/api/newform.js"; //修改日期时间选择的接口
import { deleteDateTime } from "@/api/newform.js"; //删除日期时间选择的接口

import { addRate } from "@/api/newform.js"; //增加评分题的接口
import { reviseRate } from "@/api/newform.js"; //修改评分题的接口
import { deleteRate } from "@/api/newform.js"; //删除评分题的接口

export default {
    data() {
        return {
            formInfo: {},
            questionArray: [], //所有题目数组
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                    },
                    {
                        text: "最近一个月",
                    },
                    {
                        text: "最近三个月",
                    },
                ],
            },
            pickerOptions0: {
                shortcuts: [
                    {
                        text: "一周后",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", new Date());
                        },
                    },
                    {
                        text: "两周后",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(
                                date.getTime() + 3600 * 1000 * 24 * 14
                            );
                            picker.$emit("pick", date);
                        },
                    },
                    {
                        text: "一个月后",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(
                                date.getTime() + 3600 * 1000 * 24 * 30
                            );
                            picker.$emit("pick", date);
                        },
                    },
                ],
            },
        };
    },
    created() {//刷新时调用
        var formId=this.$route.query.formId;//获取跳转参数：表单id
        this.GetFormInfo(formId); //根据表单id查询表单内容
    },
    methods: {
        //type: 0填空题 1单选题 2多选题 3下拉 4滑动 5日期时间 6评分
        //根据参数获取表单内容
        GetFormInfo(formId){
            //打包数据
            var params = {
                formId: formId
            };
            //保存this
            var that = this;
            //调用接口
            getFormInfo(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "获取表单信息成功",
                        type: "success",
                    });
                    that.formInfo=response.form.formInfo;
                    that.questionArray=response.form.questions;
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //更新表单信息
        ReviseForm(){
            //打包数据
            var params = {
                id: this.formInfo.id, 
                userId: this.formInfo.userId, 
                formName: this.formInfo.formName, 
                formInfo: this.formInfo.formInfo, 
                counts: this.formInfo.counts, 
                formStatus: this.formInfo.formStatus,
                formUrl: this.formInfo.formUrl,
                createTime: this.formInfo.createTime,
                timeLimit: this.formInfo.timeLimit,
                beginTime: this.formInfo.beginTime,
                endTime: this.formInfo.endTime,
                formPassword: this.formInfo.formPassword,
                ipLimit: this.formInfo.ipLimit,
                isAnonymous: this.formInfo.isAnonymous
            };
            //保存this
            var that = this;
            //调用接口
            reviseForm(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "修改表单信息成功",
                        type: "success",
                    });
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //增加填空题
        AddBlank() {
            //打包数据
            var params = {
                id: nanoid(),
                formId: this.formInfo.id,
                orderId: this.formInfo.counts + 1,
                must: true,
                questionName: "",
                questionType: 0,
                questionInfo: "",
            };
            //保存this
            var that = this;
            //调用接口，保存答案
            addBlank(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "增加填空题成功",
                        type: "success",
                    });
                    that.formInfo.counts++;
                    that.questionArray.push(params);
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //修改填空题
        ReviseBlank(i) {
            //打包数据
            var params = {
                id: this.questionArray[i].id,
                formId: this.formInfo.id,
                orderId: this.questionArray[i].orderId,
                must: this.questionArray[i].must,
                questionName: this.questionArray[i].questionName,
                questionType: 0,
                questionInfo: this.questionArray[i].questionInfo,
            };
            //保存this
            var that = this;
            //调用接口
            reviseBlank(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "修改填空题成功",
                        type: "success",
                    });
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //删除填空题
        DeleteBlank(i) {
            //打包数据
            var params = {
                id: this.questionArray[i].id, //表单id
            };
            //保存this
            var that = this;
            //调用接口，新建表单
            deleteBlank(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "删除填空题成功",
                        type: "success",
                    });
                    that.formInfo.counts--;
                    that.questionArray.splice(i, 1);
                    that.HandleOrderId(i);
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //删除问题后，其后问题的orderId的向前移进
        HandleOrderId(i){
            for(var j=i;j<this.questionArray.length;j++){
                this.questionArray[j].orderId--;
            }
        },
        //增加单选题
        AddRadio() {
            //打包数据
            var params = {
                id: nanoid(),
                formId: this.formInfo.id,
                orderId: this.formInfo.counts + 1,
                must: true,
                questionName: "",
                questionType: 1,
                questionInfo: "",
            };
            //保存this
            var that = this;
            //调用接口，保存答案
            addRadio(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "增加单选题成功",
                        type: "success",
                    });
                    that.formInfo.counts++; //题目数增加
                    that.questionArray.push(params); //填充问题数组
                    that.$set(
                        this.questionArray[this.formInfo.counts - 1],
                        "options",
                        []
                    ); //增加选项字段
                    that.AddOption(this.formInfo.counts - 1, -1); //增加一个选择题
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //修改单选题
        ReviseRadio(i) {
            //打包数据
            var params = {
                id: this.questionArray[i].id,
                formId: this.formInfo.id,
                orderId: this.questionArray[i].orderId,
                must: this.questionArray[i].must,
                questionName: this.questionArray[i].questionName,
                questionType: 1,
                questionInfo: this.questionArray[i].questionInfo,
            };
            //保存this
            var that = this;
            //调用接口，保存答案
            reviseRadio(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "修改单选题成功",
                        type: "success",
                    });
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //删除单选题
        DeleteRadio(i) {
            //打包数据
            var params = {
                id: this.questionArray[i].id, //表单id
            };
            //保存this
            var that = this;
            //调用接口
            deleteRadio(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "删除单选题成功",
                        type: "success",
                    });
                    //删除问题对应的的选项
                    for (var j = that.questionArray[i].options.length; j > 0; j--) {
                        that.DeleteOption(i, j-1);
                    }
                    that.formInfo.counts--;
                    that.questionArray.splice(i, 1);
                    that.HandleOrderId(i);
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //增加多选题
        AddCheckbox() {
            //打包数据
            var params = {
                id: nanoid(),
                formId: this.formInfo.id,
                orderId: this.formInfo.counts + 1,
                must: true,
                questionName: "",
                questionType: 2,
                questionInfo: "",
                optionMin: 1,
                optionMax: 2,
            };
            this.formInfo.counts++; //题目数增加
            this.questionArray.push(params); //填充问题数组
            this.$set(this.questionArray[this.formInfo.counts - 1], "options", []); //增加选项字段
            //增加两个选择题
            this.AddOption(this.formInfo.counts - 1, -1);
            this.AddOption(this.formInfo.counts - 1, 0);
            //保存this
            var that = this;
            //调用接口，保存答案
            addCheckbox(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "增加多选题成功",
                        type: "success",
                    });
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //修改多选题
        ReviseCheckbox(i){
            //打包数据
            var params = {
                id: this.questionArray[i].id,
                formId: this.formInfo.id,
                orderId: this.questionArray[i].orderId,
                must: this.questionArray[i].must,
                questionName: this.questionArray[i].questionName,
                questionType: 2,
                questionInfo: this.questionArray[i].questionInfo,
                optionMin: this.questionArray[i].optionMin,
                optionMax: this.questionArray[i].optionMax
            };
            //保存this
            var that = this;
            //调用接口，保存答案
            reviseCheckbox(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "修改多选题成功",
                        type: "success",
                    });
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //删除多选题
        DeleteCheckbox(i) {
            //打包数据
            var params = {
                id: this.questionArray[i].id, //表单id
            };
            //保存this
            var that = this;
            //调用接口
            deleteCheckbox(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "删除多选题成功",
                        type: "success",
                    });
                    //删除问题对应的的选项
                    for (var j = that.questionArray[i].options.length; j > 0; j--) {
                        that.DeleteOption(i, j-1);
                    }
                    that.formInfo.counts--;
                    that.questionArray.splice(i, 1);
                    that.HandleOrderId(i);
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //增加下拉框
        AddListbox() {
            //打包数据
            var params = {
                id: nanoid(),
                formId: this.formInfo.id,
                orderId: this.formInfo.counts + 1,
                must: true,
                questionName: "",
                questionType: 3,
                questionInfo: "",
            };
            //保存this
            var that = this;
            //调用接口
            addListbox(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "增加下拉框成功",
                        type: "success",
                    });
                    that.formInfo.counts++;
                    that.questionArray.push(params);
                    that.$set(
                        this.questionArray[this.formInfo.counts - 1],
                        "options",
                        []
                    ); //增加选项字段
                    that.AddOption(this.formInfo.counts - 1, -1); //增加一个选择题
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //修改下拉框
        ReviseListbox(i) {
            //打包数据
            var params = {
                id:this.questionArray[i].id,
                formId: this.formInfo.id,
                orderId: this.formInfo.counts + 1,
                must: this.questionArray[i].must,
                questionName: this.questionArray[i].questionName,
                questionType: 3,
                questionInfo: this.questionArray[i].questionInfo,
            };
            //保存this
            var that = this;
            //调用接口
            reviseListbox(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "修改下拉框成功",
                        type: "success",
                    });
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //删除下拉框
        DeleteListbox(i) {
            //打包数据
            var params = {
                id: this.questionArray[i].id, //表单id
            };
            //保存this
            var that = this;
            //调用接口
            deleteListbox(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "删除下拉框成功",
                        type: "success",
                    });
                    //删除问题对应的的选项
                    for (var j = that.questionArray[i].options.length; j > 0; j--) {
                        that.DeleteOption(i, j-1);
                    }
                    that.formInfo.counts--;
                    that.questionArray.splice(i, 1);
                    that.HandleOrderId(i);
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //增加选项
        AddOption(i, j) {
            //打包数据
            var params = {
                id: nanoid(),
                formId: this.formInfo.id,
                questionId: this.questionArray[i].id,
                optType: null,
                content: "",
                orderId: this.questionArray[i].options.length + 1,
            };
            switch (this.questionArray[i].questionType) {
                case 2: //单选题
                    params.optType = 0;
                    break;
                case 3: //多选题
                    params.optType = 1;
                    break;
                case 4: //下拉题
                    params.optType = 2;
                    break;
            }
            //保存this
            var that = this;
            //调用接口，保存答案
            addOption(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "增加选项成功",
                        type: "success",
                    });
                    that.questionArray[i].options.splice(j + 1, 0, params); //在j后面增加一个选项
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //修改选项
        ReviseOption(i, j) {
            //打包数据
            var params = {
                id: this.questionArray[i].options[j].id,
                formId: this.formInfo.id,
                questionId: this.questionArray[i].id,
                optType: this.questionArray[i].options[j].optType,
                content: this.questionArray[i].options[j].content,
                orderId: this.questionArray[i].options.length + 1,
            };
            //保存this
            var that = this;
            //调用接口，保存答案
            reviseOption(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "修改选项成功",
                        type: "success",
                    });
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //删除选项
        DeleteOption(i, j) {
            //打包数据
            var params = {
                id: this.questionArray[i].options[j].id,
            };
            //保存this
            var that = this;
            //调用接口，保存答案
            deleteOption(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "删除选项成功",
                        type: "success",
                    });
                    that.questionArray[i].options.splice(j, 1); //前端删除选项
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //增加滑动条
        AddSlider() {
            //打包数据
            var params = {
                id: nanoid(),
                formId: this.formInfo.id,
                orderId: this.formInfo.counts + 1,
                must: true,
                questionName: "",
                questionType: 4,
                questionInfo: "",
                slideMin: 0,
                slideMax: 100,
            };
            //保存this
            var that = this;
            //调用接口
            addSlide(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "增加滑动条成功",
                        type: "success",
                    });
                    that.formInfo.counts++;
                    that.questionArray.push(params);
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //修改滑动条
        ReviseSlide(i) {
            //打包数据
            var params = {
                id: this.questionArray[i].id,
                formId: this.formInfo.id,
                orderId: this.questionArray[i].orderId,
                must: this.questionArray[i].must,
                questionName: this.questionArray[i].questionName,
                questionType: 4,
                questionInfo: this.questionArray[i].questionInfo,
                slideMin: this.questionArray[i].slideMin,
                slideMax: this.questionArray[i].slideMax,
            };
            //保存this
            var that = this;
            //调用接口
            reviseSlide(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "修改滑动条成功",
                        type: "success",
                    });
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //删除滑动条
        DeleteSlide(i) {
            //打包数据
            var params = {
                id: this.questionArray[i].id, //问题id
            };
            //保存this
            var that = this;
            //调用接口，新建表单
            deleteSlide(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "删除滑动条成功",
                        type: "success",
                    });
                    that.formInfo.counts--;
                    that.questionArray.splice(i, 1);
                    that.HandleOrderId(i);
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //增加日期时间选择
        AddDateTime() {
            //打包数据
            var params = {
                id: nanoid(),
                formId: this.formInfo.id,
                orderId: this.formInfo.counts + 1,
                must: true,
                questionName: "",
                questionType: 5,
                questionInfo: "",
            };
            //保存this
            var that = this;
            //调用接口
            addDateTime(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "增加日期时间选择成功",
                        type: "success",
                    });
                    that.formInfo.counts++;
                    that.questionArray.push(params);
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //修改日期时间选择
        ReviseDateTime(i) {
            //打包数据
            var params = {
                id: this.questionArray[i].id,
                formId: this.formInfo.id,
                orderId: this.questionArray[i].orderId,
                must: this.questionArray[i].must,
                questionName: this.questionArray[i].questionName,
                questionType: 5,
                questionInfo: this.questionArray[i].questionInfo,
            };
            //保存this
            var that = this;
            //调用接口
            reviseDateTime(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "修改日期时间选择成功",
                        type: "success",
                    });
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //删除日期时间选择
        DeleteDateTime(i) {
            //打包数据
            var params = {
                id: this.questionArray[i].id, //表单id
            };
            //保存this
            var that = this;
            //调用接口，新建表单
            deleteDateTime(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "删除日期时间选择成功",
                        type: "success",
                    });
                    that.formInfo.counts--;
                    that.questionArray.splice(i, 1);
                    that.HandleOrderId(i);
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //增加评分题
        AddRate() {
            //打包数据
            var params = {
                id: nanoid(),
                formId: this.formInfo.id,
                orderId: this.formInfo.counts + 1,
                must: true,
                questionName: "",
                questionType: 6,
                questionInfo: "",
            };
            //保存this
            var that = this;
            //调用接口，保存答案
            addBlank(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "增加评分题成功",
                        type: "success",
                    });
                    that.formInfo.counts++;
                    that.questionArray.push(params);
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //增加评分题
        AddRate() {
            //打包数据
            var params = {
                id: nanoid(),
                formId: this.formInfo.id,
                orderId: this.formInfo.counts + 1,
                must: true,
                questionName: "",
                questionType: 6,
                questionInfo: "",
            };
            //保存this
            var that = this;
            //调用接口
            addRate(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "增加评分题成功",
                        type: "success",
                    });
                    that.formInfo.counts++;
                    that.questionArray.push(params);
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //删除评分题
        DeleteRate(){
            //打包数据
            var params = {
                id: this.questionArray[i].id, //表单id
            };
            //保存this
            var that = this;
            //调用接口，新建表单
            deleteRate(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "删除评分题成功",
                        type: "success",
                    });
                    that.formInfo.counts--;
                    that.questionArray.splice(i, 1);
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //修改评分题
        ReviseRate(i){
            //打包数据
            var params = {
                id: this.questionArray[i].id,
                formId: this.formInfo.id,
                orderId: this.questionArray[i].orderId,
                must: this.questionArray[i].must,
                questionName: this.questionArray[i].questionName,
                questionType: 6,
                questionInfo: this.questionArray[i].questionInfo,
            };
            //保存this
            var that = this;
            //调用接口
            reviseRate(params)
                .then((response) => {
                    console.log(response);
                    that.$message({
                        message: "修改评分题成功",
                        type: "success",
                    });
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        // //选项上移
        // UpOption(i, j) {
        //     if (j == 0) {
        //         return;
        //     } else if (j > 0) {
        //         this.questionArray[i].choice[j] = this.questionArray[
        //             i
        //         ].choice.splice(j - 1, 1, this.questionArray[i].choice[j])[0];
        //         return;
        //     }
        // },
        // //选项下移
        // DownChoice(i, j) {
        //     if (j == this.questionArray[i].choice.length - 1) {
        //         return;
        //     } else {
        //         this.questionArray[i].choice[j] = this.questionArray[
        //             i
        //         ].choice.splice(j + 1, 1, this.questionArray[i].choice[j])[0];
        //         return;
        //     }
        // },
        //上移问题
        UpQuestion(i) {
            if (i == 0) {
            } else if (i > 0) {
                this.questionArray[i] = this.questionArray.splice(
                    i - 1,
                    1,
                    this.questionArray[i]
                )[0];
            }
        },
        //下移问题
        DownQuestion(i) {
            if (i == this.questionArray.length - 1) {
            } else if (i != this.questionArray.length - 1) {
                this.questionArray[i] = this.questionArray.splice(
                    i + 1,
                    1,
                    this.questionArray[i]
                )[0];
            }
        },
        //测试函数
        test(picker) {
            picker.$emit("pick", new Date());
        },
    },
    //数据加工
    computed: {
        qArray() {
            return JSON.parse(JSON.stringify(this.questionArray));
        },
        fInfo() {
            return JSON.parse(JSON.stringify(this.formInfo));
        },
    },
    //监听
    watch: {
        //监听表单信息
        fInfo: {
            handler(newVal,oldVal){
                //截至日期设置有误
                if(newVal.timeLimit==true && newVal.endTime!=oldVal.endTime){
                    if(Date.parse(newVal.endTime)< new Date()){
                        this.$message({
                        message: "请设置正确的表单截止时间",
                        type: "warning",
                    });
                    this.formInfo.endTime=new Date();
                    return;
                    }
                    else{
                        this.ReviseForm();
                        return;
                    }
                }  
                //防止在创建表单时更新表单，发生冲突
                if(newVal.id!=""&&oldVal.id!=""){
                    this.ReviseForm();
                }
                
            },
            deep:true,
        },
        //监听表单内容，动态往后端发送请求保存表
        qArray: {
            //难点：实现精确异常，判断整个对象是不精确的，只有判断某一确定字段才是精确的
            handler(newVal, oldVal) {
                //题目数变更，不理睬
                if (newVal.length != oldVal.length) {
                    return;
                }
                //选项数数变更，不理睬
                for(var i=0;i < newVal.length;i++){
                    if(newVal[i].questionType==1||newVal[i].questionType==2||newVal[i].questionType==3){
                        if (newVal[i].options.length != oldVal[i].options.length){
                            return;
                        }
                    }
                }
                //内容变更，理睬
                //公有变更：是否必填、问题名
                for(var i=0;i < newVal.length;i++){
                    if(newVal[i].must != oldVal[i].must || newVal[i].questionName != oldVal[i].questionName){
                        switch(newVal[i].questionType){
                            case 0: //填空题
                                this.ReviseBlank(i); //修改填空题
                                return;
                            case 1: //单选题
                                this.ReviseRadio(i);//题目内容变更了
                                return;
                            case 2: //多选题
                                this.ReviseCheckbox(i);//题目内容变更了
                                return;
                            case 3: //下拉题
                                this.ReviseListbox(i);//题目内容变更了
                                return;
                            case 4: //滑动条
                                this.ReviseSlide(i);//题目内容变更了
                                return;
                            case 5: //日期时间选择
                                this.ReviseDateTime(i);//题目内容变更了
                                return;
                            case 6://评分题
                                this.ReviseRate(i);
                                return;
                            default:
                                return;
                        }
                    }
                }
                //带选项题层次较深特殊处理，目前只监听选项名
                for (var i = 0; i < newVal.length; i++) {
                    switch (newVal[i].questionType) {
                        case 1: //单选题
                            for (var j = 0;j < newVal[i].options.length;j++) {//选项内容变更了
                                if (newVal[i].options[j].content !=oldVal[i].options[j].content) {//选项名改变了
                                    this.ReviseOption(i, j);
                                    return;
                                }

                            }
                            break;
                        case 2: //多选题
                            if(newVal[i].optionMin !=oldVal[i].optionMin|| newVal[i].optionMax !=oldVal[i].optionMax){//最大项数和最小项数变更
                                if(newVal[i].optionMin >newVal[i].optionMax){
                                    this.$message({
                                        message: "请设置正确的选项数限制",
                                        type: "warning",
                                    });
                                    this.questionArray[i].optionMin=this.questionArray[i].optionMax;   
                                    return;                                  
                                }
                                else{
                                    this.ReviseCheckbox(i, j);
                                    return;
                                }
                            }
                            for (var j = 0;j < newVal[i].options.length;j++) {//选项内容变更了
                                if (newVal[i].options[j].content !=oldVal[i].options[j].content) {//选项名改变了
                                    this.ReviseOption(i, j);
                                    return;
                                }
                            }
                            break;
                        case 3: //下拉题
                            for (var j = 0;j < newVal[i].options.length;j++) {//选项内容变更了
                                if (newVal[i].options[j].content !=oldVal[i].options[j].content) {//选项名改变了
                                    this.ReviseOption(i, j);
                                    return;
                                }
                            }
                            break;
                        case 4://滑动条
                            if(newVal[i].slideMin !=oldVal[i].slideMin|| newVal[i].slideMax !=oldVal[i].slideMax){//最大值和最小值变更
                                if(newVal[i].slideMin >newVal[i].slideMax){
                                    this.$message({
                                        message: "请设置正确的滑动范围",
                                        type: "warning",
                                    });
                                    this.questionArray[i].slideMin=this.questionArray[i].slideMax;   
                                    return;                                  
                                }
                                else{
                                    this.ReviseSlide(i, j);
                                    return;
                                }
                            }
                            break;
                        default:
                            break;
                    }
                }
            },
            deep: true,
        },
    },

};
</script>